import React from 'react';
import './newest.less';
import Slider from "react-slick";
import "slick-carousel/slick/slick.less";
import "slick-carousel/slick/slick-theme.less";
import API from '../../../api/index';
class Newest extends React.Component {
    state = {
        list: [],
    }
    render() {
        const settingsNew = {
            dots: true,
            infinite: true,
            speed: 500,
            slidesToShow: 5,
            slidesToScroll: 5
          };
        return <div className='newest_box'>
            <div className="navitem clearfix">
                <h2><a href="#">新碟上架</a></h2>
                <span><a href="#">更多</a></span>
            </div>
            <div className="newestcont">
                <div className="newestcontborder">
                    <span className="leftBtn"></span>
                    <div className="imgbox">
                        <Slider {...settingsNew}>                        
                        {
                            this.state.list.map(
                                (item, index) => {
                                    return <div className="imgitem" key={index}>
                                        <img src={item.itemPicUrl} alt="" />
                                        <a href="#" className="imgitembg"></a>
                                        <dl className="itemdl">
                                            <dt><a href="#">{item.itemName}</a></dt>
                                            <dd><a href="#">{item.artistName}</a></dd>
                                        </dl>
                                    </div>
                                }
                            )
                        }</Slider>
                    </div>
                    <span className="rightBtn"></span>
                </div>
            </div>
        </div>;
    }
    componentDidMount() {
        API.myIndex.album().then(data => {
            let result = data.albums.slice(0, 10);
            this.setState({
                list: result.map(item => {
                    var itemObj = {
                        "artistName": item.artist.name,
                        "itemName": item.name,
                        "itemPicUrl": item.picUrl,
                    }
                    return itemObj;
                })
            })
        })
    }
}
export default Newest